<template>
    <el-dialog width="500px" title="员工导入" :visible="showExcelDialog" @close="$emit('update:showExcelDialog', false)">
        <el-row type="flex" justify="center">
            <div class="upload-excel">
                <input ref="upfile" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="uploadchange">
                <div class="drop">
                    <i class="el-icon-upload" />
                    <el-button type="text" @click="dowlogexcel">下载导入模板</el-button>
                    <span>
                        <el-button type="text" @click="uploadfile">点击上传</el-button>
                    </span>
                </div>
            </div>
        </el-row>
        <el-row type="flex" justify="end">
            <!-- update:props属性名，值 直接修改 .sync修饰符的属性值 -->
            <el-button size="mini" type="primary" @click="$emit('update:showExcelDialog', false)">取消</el-button>
        </el-row>
    </el-dialog>
</template>
<script>
import FileSaver from 'file-saver';
import { importexcel, importemp } from '@/api/emplooyee';
export default {
    props: {
        showExcelDialog: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        //下载模板
        async dowlogexcel() {
            const res = await importexcel()
            FileSaver.saveAs(res, '员工模板.xlsx')
        },
        //弹出文件选择器
        //只有一种发生弹出文件选择器 <input type='file'/>
        uploadfile() {
            //触发input的点击事件就可以弹出文件选择框
            this.$refs.upfile.click()
        },
        //监听文件弹框的input的变化事件
        async uploadchange(event) {
            //上传的文件
            const file = event.target.files
            //判断是否上传文件
            if (file.length > 0) {
                //上传文件的接口的参数是from-data类型
                //创建一个FormData类型的对象
                const data = new FormData()
                //添加数据
                data.append('file', file[0])
                //用try catch来捕获错误
                try {
                    //调用上传接口
                    await importemp(data)
                    this.$message.success('添加成功')
                    //加载添加员工后的数据
                    this.$emit('getempdata')
                    //关闭弹层
                    this.$emit('update:showExcelDialog', false)
                }catch (err){
                    //catch用来捕获错误
                }finally{
                    //finally 不论是成功还是失败都会执行
                    this.$refs.upfile.value=''
                }
               
            }

        }
    }
}
</script>

<style scoped lang="scss">
.upload-excel {
    display: flex;
    justify-content: center;
    margin: 20px;
    width: 360px;
    height: 180px;
    align-items: center;
    color: #697086;

    .excel-upload-input {
        display: none;
        z-index: -9999;
    }

    .btn-upload,
    .drop {
        border: 1px dashed #dcdfe6;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 160px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .drop {
        line-height: 40px;
        color: #bbb;

        i {
            font-size: 60px;
            display: block;
            color: #c0c4cc;
        }
    }
}
</style>